<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>封装缓动动画函数</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            position: absolute;
            top: 50px;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: #f00;
        }
    </style>
</head>
<body>
    <div></div>
    <button>启动</button>
    <script>
        //动画函数封装
        //el  需要执行动画的元素对象
        //target  动画目标坐标值
        //callback  回调函数
        function animation(el,target,callback){
            //1.计算步长
            // var step=Math.ceil((target-el.offsetLeft)/10);
            var step=(target-el.offsetLeft)/25;
            //取整
            step>0 ? Math.ceil(step):Math.floor(step);
            // console.log(step);
            el.style.left=el.offsetLeft+step+'px';
            //使用var声明的变量，在程序运行时需要分配一个内存空间
            //>1.比较浪费内存空间，执行效率较低
            //>2.存在大量同名变量，不易区分
            //js是动态语言，可以给已存在的对象添加属性和方法
            // var timer=setInterval(function(){
            //不论触发几次，只执行一次
            clearInterval(el.timer);
            //开启定时器
            el.timer=setInterval(function(){
                //步长，每次的增量和速度有关
                // var step=Math.ceil((target-el.offsetLeft)/10);
                el.style.left=el.offsetLeft+step+'px';
                step>0 ? Math.ceil(step):Math.floor(step);
                // console.log(step);
                // console.log(el.timer);

                if(el.offsetLeft==target){
                    clearInterval(el.timer);
                    callback && callback();
                }
            },15)
            // console.log(el.timer);
        }
        var div=document.querySelector('div');
        var btn=document.querySelector('button');

        btn.addEventListener('click',function(){
            // animation(div,1000);
            //当元素运动到800时，背景颜色变为橙色
            animation(div,800,function(){
                div.style.backgroundColor='orange';
            })
        })
        // animation(div,600);
        // btn.onclick=function(){
        //     animation(div,1200);
        // }
    </script>
</body>
</html>